body {
  margin: 0;
}
section {
  box-sizing: border-box;
  height: 100vh;
  border: 4px dotted #b57906;
  clip-path: inset(0 0 0 0);
  background: #f5dfb6;
  position: sticky;
  top: 0;
}
section:nth-child(2n) {
  background: #cfaaff
}
.float-img {
  position: fixed;
  top: 50%;
  right:0;
  transform: translateY(-50%);
}

.clip-path {
  transition: 0.4s cubic-bezier(1, -1, 0, 2);
  -webkit-clip-path: circle(180px at 102px 77px);
  clip-path: circle(180px at 102px 77px);
}
.clip-path:hover {
  -webkit-clip-path: circle(77px at 102px 77px);
  clip-path: circle(77px at 102px 77px);
}
.clip-path2 {
  transition: 0.4s cubic-bezier(1, -1, 0, 2);
  -webkit-clip-path: ellipse(190px 130px  at 102px 77px);
  clip-path: ellipse(190px 130px at 102px 77px);
  /* clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); */
}
.clip-path2:hover {
  -webkit-clip-path: ellipse(100px 77px at 102px 77px);
  clip-path: ellipse(100px 77px at 102px 77px);
}
.link {color: #f30;text-decoration: underline;padding: 2px 0;}
.link:hover {text-decoration: none;animation: waveMove 1s infinite linear;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff3300' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%;background-size: 20px auto;}
@keyframes waveMove {from { background-position:0 100%; } to { background-position:-20px 100%; }}
.square{
  display: inline-block;
  width: 20vmin;
  height: 20vmin;
  border: 2px double #f00;
}

.y-center {
  position: relative;
  border: 1px solid #f00;
  padding: 10px;
  height: 400px;
}
.word-center {
  display: inline-block;
  line-height: 300px;
  border: 1px solid #0ff;
}
.img-center, .img-center img {
  vertical-align: middle;
}
.absolute-center, .fix-center {
  display: inline-block;
  border: 1px solid #f0f;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fix-center {
  position: fixed;
}

